<template>
		<view class="container">
			<u-form :model="form" ref="uForm" label-width="250">
				<u-form-item label="请假人" prop="name"><u-input v-model="form.name" placeholder="请输入请假人姓名" disabled/></u-form-item>
				<u-form-item label="请假原因" prop="reason"><u-input v-model="form.reason" placeholder="请输入请假原因" type="textarea"/></u-form-item>
				<u-form-item label="请假开始时间" prop="start">
					<u-calendar 
						v-model="startShow" 
						:mode="mode" 
						@change="startChange" 
						min-date="1950-01-01" 
						max-date="2030-01-01"
					></u-calendar>
					<u-input 
						v-model='form.start'
						type="select"
						@click="startShow = true"
						placeholder="请设置请假开始日期"
					/>
				</u-form-item>
				<u-form-item label="请假结束时间" prop="end">
					<u-calendar
						v-model="endShow" 
						:mode="mode" 
						@change="endChange" 
						min-date="1950-01-01" 
						max-date="2030-01-01"
					></u-calendar>
					<u-input 
						v-model='form.end'
						type="select"
						@click="endShow = true"
						placeholder="请设置请假结束日期"
					/>
				</u-form-item>
			</u-form>
			<view class="btn">
				<u-button shape="square" type="primary" @click="submit">提交</u-button>
			</view>
			<u-top-tips ref="uTips"></u-top-tips>
			<u-toast ref="uToast" />
		</view>
</template>

<script>
	import askLeaveApi from '../../api/askLeave.js'
	export default {
		data() {
			return {
				form: {
					// 请假人姓名
					name: '',
					// 请假原因
					reason: '',
					// 页面显示的请假时间
					time: '',
					// 开始时间,
					start: '',
					// 结束时间
					end: ''
				},
				// 是否显示请假开始时间的日历
				startShow: false,
				endShow: false,
				// 日历的模式是范围模式
				mode: 'date',
				// 表单验证规则
				rules: {
					name: [
						{ 
							required: true, 
							message: '请输入请假人姓名', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change','blur'],
						}
					],
					reason: [
						{
							required: true, 
							message: '请输入请假原因', 
							trigger: ['change','blur']
						}
					],
					start: [
						{
							required: true, 
							message: '请设置请假开始日期',  
							trigger: ['change','blur']
						}
					],
					end: [
						{
							required: true, 
							message: '请设置请假结束日期',  
							trigger: ['change','blur']
						}
					]
				}
			};
		},
		methods: {
			// 显示消息提示框
			showToast(title, type) {
				this.$refs.uToast.show({
					title,
					type,
					position: 'top'
				})
			},
			// 请假开始时间日历改变的回调
			startChange(e) {
				console.log(e);
				this.form.start = e.result
			},
			// 请假结束时间日历改变的回调
			endChange(e) {
				console.log(e);
				this.form.end = e.result
			},
			// 提交表单的回调
			submit() {
				// 验证表单
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
						const { name, reason, start, end } = this.form
						askLeaveApi.askLeave(
						{
							leaveApplicant: name,
							reasonForLeave: reason,
							leaveStartTime: new Date(start),
							deadlineForLeave: new Date(end)
						}).then(res => {
							console.log(res)
							this.showToast('提交成功', 'success')
							setTimeout(() => {
								this.$Router.replaceAll({name:'index'})
							},1000)
						}).catch(error => {
							this.showToast('提交失败', 'error')
						})
					} else {
						console.log('验证失败');
					}
				});
			},
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
			this.form.name = this.$store.state.userInfo.username
		}
};
</script>

<style scoped lang="scss">
.container {
	width: 90%;
	margin: 0 auto;
	.btn {
		margin-top: 20px;
	}
}
</style>